@mixin align-center-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@mixin full-center-middle {
  width: 100%;
  height: 100%;
  @include align-center-middle();
}

@mixin background-color-as-button($base-bg) {
  background-color: $base-bg;
  &:hover {
    background-color: shade-color($base-bg, $btn-hover-bg-shade-amount);
  }
  transition: background-color 0.15s ease-in-out;
}

@mixin full-height-grid-center-center {
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
}
